<template>
	<view>
		<view class="search"><uni-search-bar cancelText="搜索" :radius="100" @cancel='onSearch' @confirm="onSearch" @input="onInput" :placeholder="placeholder"></uni-search-bar></view>
		<view class="my-info" v-if='distributor.length>0'>
			<info :infoData="distributor" :cycle="true" @send="distributionOrder" 
			  :props="{ name: 'nickname', phone: 'phone_number', time: 'add_time', avatar: 'avatar' }">
			</info>
		</view>

		<view class="loading">
			<block v-if="isLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中</text>
			</block>
		</view>
		<without v-if="!isLoading" :showImg="false" :tip="tip"></without>
	</view>
</template>

<script>
let App = getApp().globalData;
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import info from '@/components/info.vue';
import without from '@/components/without.vue';
import {mutations} from '@/store/index.js'
export default {
	// name 我的客户 || 我的分销员
	components: {
		uniSearchBar,
		info,
		without
	},
	data() {
		return {
			distributor: [],
			count: 0, //总条数
			search: '',
			page: 1,
			limit: 10,
			tip: '暂无数据',
			isLoading: false,
			type: 1 // {1我的分销员，2我的客户}
		};
	},

	onLoad(options) {
		console.log(options);
		this.type = Number(options.type);
		if (this.type === 1) {
			this.getMyDistributor();
		} else {
			uni.setNavigationBarTitle({
				title: '我的客户'
			});
			this.getMyCustomer();
		}
	},
   
	computed:{
		placeholder(){
			if(this.type==1){
				return '请输入昵称/手机号'
			}else {
				return '请输入昵称'
			}
		}
	},
	
	watch: {
		search(n, o) {
			if (!n && o) {
				this.page = 1;
				this.distributor = [];
				if (this.type === 1) {
					this.getMyDistributor();
				} else {
					this.getMyCustomer();
				}
			}
		}
	},

	methods: {
		// 我的分销员
		getMyDistributor() {
			let obj = {
				page: this.page,
				limit: this.limit,
				search: this.search
			};
			let _self = this;
			this.$request('Distribution/MiniDistributor/getMyDistributor', obj).then(res => {
				if (res.status === 1) {
					_self.count = res.data.count;
					_self.isLoading = false;
					_self.tip = '我是有底线的';
					if(res.data && res.data.list && res.data.list.length>0){
						_self.distributor = _self.distributor.concat(res.data.list);
					}
					
				} else {
					_self.isIcon = true;
					_self.tip = '暂无数据';
					_self.isLoading = false;
					App.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},

		// 我的客户
		getMyCustomer() {
			let obj = {
				page: this.page,
				limit: this.limit,
				search: this.search
			};
			let _self = this;
			this.$request('Distribution/MiniOrder/getMyCustomer', obj).then(res => {
				if (res.status === 1) {
					_self.count = res.data.count;
					_self.isLoading = false;
					_self.tip = '我是有底线的';
					if(res.data && res.data.list && res.data.list.length>0){
						_self.distributor = _self.distributor.concat(res.data.list);
					}
				} else {
					_self.distributor = [];
					_self.isIcon = true;
					_self.tip = '暂无数据';
					_self.isLoading = false;
					App.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},

		// type: 1 // {1我的分销员，2我的客户}
		distributionOrder(item) {
			let identityType = this.type;
			console.log('item',item)
			mutations.saveInfo(item)
			uni.redirectTo({
				url: '../myList/myList?identityType=' + identityType
			});
		},

		// 搜索
		onSearch() {
			if (!this.search) return;
			this.page = 1;
			this.distributor = [];
			if (this.type === 1) {
				this.getMyDistributor();
			} else {
				this.getMyCustomer();
			}
		},

		//
		onInput(e) {
			this.search = e.value;
		}
	},
	
	onReachBottom() {
		if (this.count > this.distributor.length) {
			this.isLoading = true;
			this.page++;
			if (this.type === 1) {
				this.getMyDistributor();
			} else {
				this.getMyCustomer();
			}
		} else {
			this.tip = '已加载全部';
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
.search {
	box-shadow: -2px 0 2px 2px #f6f6f6;
}
.my-info {
	box-sizing: border-box;
	padding: 25rpx 30rpx;
}
</style>
